<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
	<meta content="yes" name="apple-mobile-web-app-capable"/>
	<link rel="apple-touch-icon" href="/favicon.ico">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
	<title>ChatGPT Web</title>
	<style>
		.grey-bg {
			background: #eff3fe
		}
		.loading-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		.balls {
			width: 4em;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;
		}

		.balls div {
			width: 0.8em;
			height: 0.8em;
			border-radius: 50%;
			background-color: #484aa1;
		}

		.balls div:nth-of-type(1) {
			transform: translateX(-100%);
			animation: left-swing 0.5s ease-in alternate infinite;
		}

		.balls div:nth-of-type(3) {
			transform: translateX(-95%);
			animation: right-swing 0.5s ease-out alternate infinite;
		}

		@keyframes left-swing {

			50%,
			100% {
				transform: translateX(95%);
			}
		}

		@keyframes right-swing {
			50% {
				transform: translateX(-95%);
			}

			100% {
				transform: translateX(100%);
			}
		}

		@media (prefers-color-scheme: dark) {
			body {
				background: #121212;
			}
		}
	</style>
</head>

<body class="grey-bg">
	<div id="app">

		<div class="loading-wrap">
			<div class="balls">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<script type="module" src="/src/main.ts"></script>
</body>

</html>
